<template>
    <div class="echartContainer">
        <el-card style="max-width: 480px; position: relative;">
            <span class="close" @click="closeChart">X</span>
            <div id="chart" style="width: 100%; height: 250px"></div>
            <div class="two"  style="display: flex;">
                <div id="chart1" style="width: 50%; height: 250px"></div>
                <div id="chart2" style="width: 50%; height: 250px"></div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import *  as echart from "echarts"
import { popoverEmits } from "element-plus";
import { onMounted } from "vue"
import { useStore } from "vuex"
const props = defineProps(['totalCom','importantCom'])
const store = useStore()
onMounted(() => {
  console.log(props)
    var chartDom = document.getElementById('chart')!
    var myChart = echart.init(chartDom)
    var option
    option = {
        title: {
    text: '污染企业总联网数' + store.state.totalCom,
    left: 'center'
  },
  color: [
            "#96DDF2",
            "#3436C7",
            "#63DCA6",
            "#5B93FF",
            "#F899C9 ",
            "#FF8F6B",
            "#FFD66B",
            "#FF7723",
            "#00FF7F",
            "#FF0000",
          ],
        series: [
    {
      type: 'pie',
      
      data: [
        {
          value: store.state.totalCom - store.state.importantCom,
          name: '非重点企业'
        },
        {
          value: store.state.importantCom,
          name: '重点企业'
        },
      ],
      label: {
          show: true,
          position: 'outside',
          formatter: '{c}\n{b}' // 显示百分比和名称
        }
    }
  ]
    };
    option && myChart.setOption(option);
    var chartDom1 = document.getElementById('chart1')!
    var myChart1 = echart.init(chartDom1)
    var option1
    option1 = {
        title: {
    text: '15',
    left: 'center',
    top: 'center',
    subtext:'重点企业排水口'
  },
  color: [
            "#96DDF2",
            "#3436C7",
            "#63DCA6",
            "#5B93FF",
            "#F899C9 ",
            "#FF8F6B",
            "#FFD66B",
            "#FF7723",
            "#00FF7F",
            "#FF0000",
          ],
        series: [
    {
      type: 'pie',
      
      data: [
        {
          value: 35,
          name: '非重点企业'
        },
        {
          value: 15,
          name: '重点企业'
        },
      ],
      label: {
          show: false,
        },
        radius: ['50%', '60%']
    }
  ]
    };
    option1 && myChart1.setOption(option1);
    var chartDom2 = document.getElementById('chart2')!
    var myChart2 = echart.init(chartDom2)
    var option2
    option2 = {
        title: {
    text: '10',
    left: 'center',
    top: 'center',
    subtext:'重点企业排气口'
  },
  color: [
            "#96DDF2",
            "#3436C7",
            "#63DCA6",
            "#5B93FF",
            "#F899C9 ",
            "#FF8F6B",
            "#FFD66B",
            "#FF7723",
            "#00FF7F",
            "#FF0000",
          ],
        series: [
    {
      type: 'pie',
      
      data: [
        {
          value: 30,
          name: '非重点企业'
        },
        {
          value: 10,
          name: '重点企业'
        },
      ],
      label: {
          show: false,
        },
        radius: ['50%', '60%']
    }
  ]
    };
    option2 && myChart2.setOption(option2);
})
const emits = defineEmits(["closeEchart"])
let closeChart = ()=>{
  emits("closeEchart")
}
</script>
<style>
    .echartContainer{
        width: 500px;
        height: 500px;
        position: relative;
    }
    .close{
      position: absolute;
      right: 10px;
      cursor: pointer;
    }
</style>